<template>
  <div>
    <el-header>头</el-header>
    <h1 style="font-size: 50px;margin-left: 100px">
      现在登录,解锁更多资讯
    </h1>
    <el-card style="margin: 100px 480px">
      <el-row>
        <el-col :span="12" style="margin-top: 40px;">
          <img src="http://localhost:8008/imgs/reg.png" width="95%">
        </el-col>
        <el-col :span="12">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="用户名登录" name="first">
              <p style="font-size: 30px;margin-left: 200px;margin-top: 60px;">登录兜兜集</p>
              <el-form :model="ruleForm" label-width="80px" style="width: 400px;height: 300px;margin-left: 40px" ref="ruleForm">
                <el-form-item label="用户名" >
                  <el-input placeholder="请输入用户名" style="font-size: 10px;" v-model="ruleForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input type="password" placeholder="请输入用户密码" v-model="ruleForm.password"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                </el-form-item>
                <a href="/frontEnd/userReg">没有账号?立即注册</a>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="手机号登录" name="second">
              <p style="font-size: 30px;margin-left: 200px;margin-top: 60px;">登录兜兜集</p>
              <el-form label-width="80px" style="width: 400px;height: 300px;margin-left: 40px">
                <el-form-item label="手机号" >
                  <el-input placeholder="请输入手机号" style="font-size: 10px;"></el-input>
                </el-form-item>
                <el-form-item label="验证码">
                  <el-input type="password" placeholder="请输入验证码"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary">登录</el-button>
                </el-form-item>
                <a href="/frontEnd/userReg">没有账号?立即注册</a>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="邮箱登录" name="third">
              <p style="font-size: 30px;margin-left: 200px;margin-top: 60px;">登录兜兜集</p>
              <el-form label-width="80px" style="width: 400px;height: 300px;margin-left: 40px">
                <el-form-item label="邮箱账号" >
                  <el-input placeholder="请输入邮箱号" style="font-size: 10px;"></el-input>
                </el-form-item>
                <el-form-item label="验证码">
                  <el-input type="password" placeholder="请输入验证码"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary">登录</el-button>
                </el-form-item>
                <a href="/frontEnd/userReg">没有账号?立即注册</a>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </el-card>
    <el-footer style="height: 60px;background-color: white;padding-top: 2px;background-color: rgba(130,129,124,0.25)">
      <Footer/>
    </el-footer>

  </div>
</template>

<script>
import Footer from "@/views/common/Footer";
export default {
  name: "reg",
  components: {Footer},
  data() {
    return {
      // 表单
      ruleForm: {
        username: '123456',
        password: '123456'
      },
      activeName: 'first'
    };
  },
  methods: {
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:9090/v1/users/login/username';
          console.log('url = ' + url);

          this.axios.post(url, this.ruleForm).then((response) => {
            let jsonResult = response.data;
            if (jsonResult.code == 200) {
              this.$message({
                message: '登录成功！',
                type: 'success'
              });
              let loginResult = jsonResult.data;
              localStorage.setItem('localJwt', loginResult.token);
              localStorage.setItem('currentUserId', loginResult.id);
              localStorage.setItem('currentUserName', loginResult.username);
              localStorage.setItem('currentUserIcon', loginResult.icon);
              this.$router.push('/frontEnd/homePage');
            } else {
              let title = '操作失败';
              this.$alert(jsonResult.message, title, {
                confirmButtonText: '确定',
                callback: action => {
                }
              });
            }
          });
        }
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }


}
</script>

<style>
a {
  text-decoration: none;
  display:block;
  float: right;

}

</style>
